<template>
    <div class="clearfix">
        <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
            :show-upload-list="true" @change="handleChange" @remove="handleRemove" :customRequest="customImageRequest"
            @preview="handlePreview">
            <div v-if="fileList">
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
            </div>
        </a-upload>
        <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
    </div>
</template>
<script setup lang="ts">
import { message, UploadProps } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { addOrEditFileInfo } from '@/api/fileInfo/fileInfo/fileInfoTs';
import { FileInfo } from './fileInfo';

const emit = defineEmits(["customImageRequest", "handleRemove"]);

interface Props {
    fileInfo?: FileInfo[];
    fromSystem?: string;
}

// 通过覆盖默认的上传行为,可以自定义自己的上传实现(只写了前端没有写请求)
const customImageRequest = (info: any) => {
    console.log(`custom mmmmmmmmmmmmmmmmmmmm`, fileList.value   )
    const formData = new FormData() as any;
    formData.append("file", info.file);
    let method = "";
    let id = '';
    if (id) {
        method = "put";
    } else {
        method = "post";
    }
    addOrEditFileInfo(method, formData).then(res => {
        if (res?.code == "200") {
            info.onSuccess(res.data, info.file);
            fileList.value[fileList.value.length - 1].uid = res.data.id;
            emit("customImageRequest", fileList.value);
        } else {
            message.error(res?.message || "上传失败,请联系管理员");
        }
    });
};

const loading = ref<boolean>(false);

const handleChange = (info: UploadChangeParam) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        loading.value = false;
        return;
    }
    if (info.file.status === 'error') {
        message.error('upload error');
    }
};

const handleRemove = (file: any) => {
    fileList.value = fileList.value.filter((item) => item.uid != file.uid);
    emit("customImageRequest", fileList.value);
}

function getBase6412(file: File) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const props = defineProps<Props>();
// const imageTypeList = ['bmp', 'jpg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'];
const fileList = ref<UploadProps['fileList']>([]);

const handleCancel = () => {
    previewVisible.value = false;
    previewTitle.value = '';
};
const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
        file.preview = (await getBase6412(file.originFileObj)) as string;
    }
    previewImage.value = file.url || file.preview;
    previewVisible.value = true;
    previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};

function init() {
    fileList.value = [];
    if (props?.fileInfo?.length) {
        props.fileInfo.forEach((item) => {
            fileList.value?.push(
                {
                    uid: item?.id + '' || '',
                    name: 'test.png',
                    status: 'done',
                    url: item?.url || '',
                }
            );
        });
    } else {
        fileList.value = [];
    }
}

watch(
    () => props.fileInfo,
    () => {
        init()
    },
    { deep: true, flush: "post" }
);

onMounted(() => {
    init()
});

</script>
<style>
.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>
